/*
 * MinIO Cloud Storage (C) 2016, 2018 MinIO, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from "react"
import axios from "axios"
import { connect } from "react-redux"
import logo from "../../img/logo.svg"
import logo1 from "../../img/logo1.svg"
import logo2 from "../../img/logo2.svg"
import logo3 from "../../img/logo3.svg"
import arrowl from "../../img/arrow-l.svg"
import wf from "../../img/wf.png"
import Alert from "../alert/Alert"
import * as actionsAlert from "../alert/actions"
import InputGroup from "./InputGroup"
import web from "../web"
import { Redirect, Link } from "react-router-dom"
import OpenIDLoginButton from './OpenIDLoginButton'
import storage from 'local-storage-fallback'

export class Login extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      // accessKey: "",
      // secretKey: "",
      accessKeyLdap: "",
      secretKeyLdap: "",
      discoveryDoc: {},
      clientId: "",
      // url:"http://192.168.0.29:18630/rest/v1/authentication/logout",
      // ldap: false,
      // loginsuccess: false
    }
  }

  // Handle field changes
  // accessKeyChange(e) {
  //   this.setState({
  //     accessKey: e.target.value
  //   })
  // }

  // secretKeyChange(e) {
  //   this.setState({
  //     secretKey: e.target.value
  //   })
  // }
  accessKeyChangeLdap(e) {
    this.setState({
      accessKeyLdap: e.target.value
    })
  }

  secretKeyChangeLdap(e) {
    this.setState({
      secretKeyLdap: e.target.value
    })
  }
  

  // handleSubmit(event) {
  //   event.preventDefault()
  //   const { showAlert, clearAlert } = this.props
  //   let message = ""
  //   if (this.state.accessKey === "") {
  //     message = "Access Key不能为空"
  //   }
  //   if (this.state.secretKey === "") {
  //     message = "Secret Key不能为空"
  //   }
  //   if (message) {
  //     showAlert("danger", message)
  //     return
  //   }
  //   web
  //     .Login({
  //       username: this.state.accessKey,
  //       password: this.state.secretKey
  //     })
  //     .then(res => {
  //       if(res.token){
  //         // Clear alerts from previous login attempts
  //         clearAlert()
  //         this.setState({
  //           loginsuccess: true
  //         })
  //       }

  //       // history.push("/")
  //     })
  //     .catch(e => {
  //       showAlert("danger", e.message)
  //     })
  // }
  
  handleSubmitLdap(event) {
    event.preventDefault()
    const { showAlert, clearAlert, history } = this.props
    let message = ""
    if (this.state.accessKeyLdap === "") {
      message = "LDAP用户名不能为空"
    }
    if (this.state.secretKeyLdap === "") {
      message = "LDAP密码不能为空"
    }
    if (message) {
      showAlert("danger", message)
      return
    }
    // history.push("/");
    web
      .LdapLogin({
        username: this.state.accessKeyLdap,
        password: this.state.secretKeyLdap
      })
      .then(res => {
        if(res.token){
          // Clear alerts from previous login attempts
          clearAlert()
          storage.setItem('uname', this.state.accessKeyLdap)
          storage.setItem('pwd', this.state.secretKeyLdap)
          this.props.history.push('/SwitchPage')
          // this.setState({
          //   loginsuccess: true
          // })
        }
      })
      .catch(e => {
        showAlert("danger", e.message)
      })
  }

  jumpTo(x) {
    const { history } = this.props
    this.props.history.push(x)
  }
  // openTo() {
  //   window.open('http://192.168.0.29:18630/j_security_check?j_username='+this.state.accessKeyLdap+'&j_password='+this.state.secretKeyLdap+'&basePath=%2F',"_blank")
  //     // window.location.href='http://192.168.0.29:18630/j_security_check?j_username='+this.state.accessKeyLdap+'&j_password='+this.state.secretKeyLdap+'&basePath=%2F';
  //   const { history } = this.props
  // }
  // switchBanner() {
    
  //   this.setState({
  //     loginsuccess: false
  //   })
  // }
  // switchLogin(x) {
  //   this.setState({
  //     ldap: x
  //   })
  // }
  componentWillMount() {
    const { clearAlert } = this.props
    // Clear out any stale message in the alert of previous page
    clearAlert()
    document.body.classList.add("is-guest")
  }

  componentDidMount() {
    web.GetDiscoveryDoc().then(({ DiscoveryDoc, clientId }) => {
      this.setState({
        clientId,
        discoveryDoc: DiscoveryDoc
      })
    })
    this.setState({
      url:"",
    })
    setTimeout(()=>{
      this.setState({
        url : "http://"+window.location.hostname+":18630/rest/v1/authentication/logout"
      })
    },200)
  }

  componentWillUnmount() {
    document.body.classList.remove("is-guest")
  }

  render() {
    const { clearAlert, alert } = this.props
    // if (web.LoggedIn()) {
    //   return <Redirect to={"/"} />
    // }
    let alertBox = <Alert {...alert} onDismiss={clearAlert} />
    // Make sure you don't show a fading out alert box on the initial web-page load.
    if (!alert.message) alertBox = ""

    const showOpenID = Boolean(this.state.discoveryDoc && this.state.discoveryDoc.authorization_endpoint)
    return (
      <div className="login">
        {alertBox}
        <img className="wf" src={wf} alt="" />
        <iframe className="iframeBox" src={this.state.url}></iframe>
        {/* {!this.state.loginsuccess && ( */}
        <div className="l-wrap">
          {/* {!this.state.ldap && (
          <form onSubmit={this.handleSubmit.bind(this)}>
            <InputGroup
              value={this.state.accessKey}
              onChange={this.accessKeyChange.bind(this)}
              className="ig-dark"
              label="Access Key"
              id="accessKey"
              name="username"
              type="text"
              spellCheck="false"
              required="required"
              autoComplete="username"
            />
            <InputGroup
              value={this.state.secretKey}
              onChange={this.secretKeyChange.bind(this)}
              className="ig-dark"
              label="Secret Key"
              id="secretKey"
              name="password"
              type="password"
              spellCheck="false"
              required="required"
            />
            <button className="lw-btn" type="submit">
              <i className="fas fa-sign-in-alt" />
            </button>
            <a className="ldap-btn" onClick={()=>this.switchLogin(true)}>LDAP 登录</a>
          </form>
          )} */}
          {/* {this.state.ldap && ( */}
            <p className="title">智能大数据存储管理平台</p>
          <form onSubmit={this.handleSubmitLdap.bind(this)}>
            <div className="login-header">欢迎登录</div>
            <div className="login-divider"></div>
            {/* <div class="login-form-item">
              <label for="username">LDAP用户名:</label>
              <input type="text" id="username" name="username" placeholder="用户名" autofocus="" required=""
              onChange={this.secretKeyChangeLdap.bind(this)}>{this.state.accessKeyLdap}</input>
            </div>
            <div class="login-form-item">
            <label for="password">LDAP密码:</label>
            <div style="position: relative">
              <input type="password" id="password" placeholder="密码" required=""
              onChange={this.secretKeyChangeLdap.bind(this)}>{this.state.secretKeyLdap}</input>
            </div>
          </div> */}
            <InputGroup
              value={this.state.accessKeyLdap}
              onChange={this.accessKeyChangeLdap.bind(this)}
              className=""
              label="用户名"
              id="accessKeyLdap"
              name="username"
              type="text"
              spellCheck="false"
              required="required"
              autoComplete="username"
              placeholder="Username"
            />
            <InputGroup
              value={this.state.secretKeyLdap}
              onChange={this.secretKeyChangeLdap.bind(this)}
              className=""
              label="密码"
              id="secretKeyLdap"
              name="password"
              type="password"
              spellCheck="false"
              required="required"
              placeholder="Password"
            />
            <button className="lw-btn" type="submit">
              登录
            </button>
            {/* <button className="ld-btn" type="submit">
              LDAP 登录
            </button> */}
            {/* <a className="ldap-btn" onClick={()=>this.switchLogin(false)}>普通登录</a> */}
          </form>
          {/* )} */}

          {showOpenID && (
            <div className="openid-login">
              <div className="or">or</div>
              {
                this.state.clientId ? (
                  <OpenIDLoginButton
                    className="btn openid-btn"
                    clientId={this.state.clientId}
                    authEp={this.state.discoveryDoc.authorization_endpoint}
                    authScopes={this.state.discoveryDoc.scopes_supported}
                  >
                    Log in with OpenID
                  </OpenIDLoginButton>
                ) : (
                  <Link to={"/login/openid"} className="btn openid-btn">
                    Log in with OpenID
                  </Link>
                )
              }
            </div>
          )}
          {showOpenID && (
            <div className="openid-login">
              <div className="or">or</div>
              {
                this.state.clientId ? (
                  <OpenIDLoginButton
                    className="btn openid-btn"
                    clientId={this.state.clientId}
                    authEp={this.state.discoveryDoc.authorization_endpoint}
                    authScopes={this.state.discoveryDoc.scopes_supported}
                  >
                    Log in with OpenID
                  </OpenIDLoginButton>
                ) : (
                  <Link to={"/login/openid"} className="btn openid-btn">
                    Log in with OpenID
                  </Link>
                )
              }
            </div>
          )}
        </div>
        {/* )} */}

        {/* {this.state.loginsuccess && (
        <div className="banner">
        <h1>智能大数据存储管理平台</h1>
        <div className="banner-ct">
          <div className="banner-item" onClick={()=>this.openTo()}>
            <div className="bg bg2">
              <img src={logo2} alt="" />
            </div>
            <div className="banner-content">
              <h2>数据集成</h2>
              <p className="banner-btn">点击进入</p>
              <img src={arrowl} alt="" />
            </div>
          </div>
          <div className="banner-item" onClick={()=>this.jumpTo("/")}>
            <div className="bg bg1">
              <img src={logo1} alt="" />
            </div>
            <div className="banner-content">
              <h2>对象存储</h2>
              <p className="banner-btn">点击进入</p>
              <img src={arrowl} alt="" />
            </div>
          </div>
          <div className="banner-item">
            <div className="bg bg3">
              <img src={logo3} alt="" />
            </div>
            <div className="banner-content">
              <h2>数据分析</h2>
              <p className="banner-btn">点击进入</p>
              <img src={arrowl} alt="" />
            </div>
          </div>
        </div>
        <button className="tologin" onClick={this.switchBanner.bind(this)}>返回登录页</button>
      </div>
        )} */}

        {/* <div className="l-footer"> */}
          {/* <a className="lf-logo" href="">
            <img src={logo} alt="" />
          </a> */}
          {/* <div className="lf-server">{window.location.host}</div> */}
        {/* </div> */}
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => {
  return {
    showAlert: (type, message) =>
      dispatch(actionsAlert.set({ type: type, message: message })),
    clearAlert: () => dispatch(actionsAlert.clear())
  }
}

export default connect(
  state => state,
  mapDispatchToProps
)(Login)
